<template>
  <div class="role-userManage">
    <el-form>
      <el-form-item>
        <el-transfer
          filterable
          :titles="['未选择用户', '已选择用户']"
          :button-texts="['到左边', '到右边']"
          :data="dataList"
          :props="{
          key:'id',
          label:'name'
          }"
          v-model="value"
          v-loading="loading"
        >
        </el-transfer>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveUser">提交</el-button>
        <el-button @click="goBack">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        loading: false,
        url: {
          getAllUser: '/sysUser/getAllUser',
          getUserIdByRoleId: '/sysUser/getUserIdByRoleId',
          saveUser: '/sysUser/saveUserRole'
        },
        dataList: [],
        value: [],
        queryForm: {
          id: ''
        }
      }
    },
    activated () {
      this.getAllUsers()
      this.queryForm.id = this.$route.params.id || 0
      this.getUserIdByRoleId(this.queryForm.id)
    },
    methods: {
      getAllUsers () {
        this.loading = true
        this.$http({
          url: this.$http.adornUrl(this.url.getAllUser),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          this.loading = false
          this.dataList = data
        })
      },
      // 根据当前角色ID获取用户ID
      getUserIdByRoleId (id) {
        this.$http({
          url: this.$http.adornUrl(this.url.getUserIdByRoleId),
          method: 'get',
          params: this.$http.adornParams({roleid: id})
        }).then(({data}) => {
          this.value = data
        })
      },
      // 提交用户
      saveUser () {
        this.loading = true
        console.log(this.value, 'id')
        this.$http({
          url: this.$http.adornUrl(this.url.saveUser),
          method: 'post',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
          },
          data: this.$http.adornData(
            {
              roleId: this.queryForm.id,
              userId: this.value
            },
            false,
            'form'
          )
        }).then(() => {
          this.loading = false
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500  // 持续时间
          })
          this.$router.push({name: 'sys-role'})
        })
      },
      goBack () {
        this.$router.push({name: 'sys-role'})
      }
    }
  }
</script>
<style scoped>
  .role-userManage{
    width: 50%;
    position: absolute !important;
    top: 8% !important;
    left: 30% !important;
  }
  .el-transfer{
    margin-bottom: 20px;

  }
</style>
